<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .mounse {
        height: 100px;
        width: 100px;
        background: gray;
        position: fixed;
      }
      .active {
        border: 5px solid yellow;
      }
    </style>
  </head>
  <body>
    <div class="mounse" data-mounse></div>
    <div class="mounse" data-mounse></div>
    <div class="mounse" data-mounse></div>
    <div class="mounse" data-mounse></div>
    <script>
      // 保存选中的老鼠
      let mounseBox = null;
      document.onclick = function (e) {
        if (e.target.dataset.mounse !== undefined) {
          mounseBox = e.target;
          // 选中的box添加一个边框
          document
            .querySelectorAll(".mounse.active")
            .forEach((el) => el.classList.remove("active"));
          e.target.classList.add("active");
        }
      };

      window.onkeydown = function (e) {
        // 保证移动是选中的老鼠
        if (mounseBox === null) return;
        if (e.key === "ArrowUp") {
          mounseBox.style.top = mounseBox.offsetTop - 20 + "px";
        }
        if (e.key === "ArrowDown") {
          mounseBox.style.top = mounseBox.offsetTop + 20 + "px";
        }
        if (e.key === "ArrowLeft") {
          mounseBox.style.left = mounseBox.offsetLeft - 20 + "px";
        }
        if (e.key === "ArrowRight") {
          mounseBox.style.left = mounseBox.offsetLeft + 20 + "px";
        }
      };
    </script>
  </body>
</html>
